<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rectangle within 879.9145201612099 x 502.8082972349771 Box</title>
    <style>
        #container {
            position: relative;
            width: 879.9145201612099px;
            height: 502.8082972349771px;
            border: 2px solid black;
            background-color: #f0f0f0;
        }

        #rectangle {
            position: absolute;
            border: 2px solid black;
            background-color: rgba(0, 0, 255, 0.3);
            /* 半透明背景 */
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="rectangle"></div>
    </div>
    <script>
        // 给定的四个坐标
        const leftTopX = 715.85;
        const leftTopY = 0;
        const rightBottomX = 879;
        const rightBottomY = 100.4;

        // 计算矩形的宽度和高度
        const width = rightBottomX - leftTopX;
        const height = rightBottomY - leftTopY;

        // 设置矩形的样式
        const rectangle = document.getElementById('rectangle');
        rectangle.style.left = leftTopX + 'px';
        rectangle.style.top = leftTopY + 'px';
        rectangle.style.width = width + 'px';
        rectangle.style.height = height + 'px';
    </script>
</body>

</html>